<template>
  <div class='login'>
    <div class='header'>
      <img src="./../../public/static/images/bglogo.png">
    </div>
    <div class='content'>
      <div><div class='panel'>
        <div class='tabbar'>
        一卡通平台
        <!--
           <router-link to="Registered" class='tabbar_dec'>注册</router-link> 
        !-->
        </div>
        <Tabs :animated="false" class='tabs'>
            <TabPane label="密码登录">
              <div class='tabsot'>
                <Form ref="requestString" :model="requestString"  :rules="ruleCustom">
                  <FormItem prop="tel">
                      <Input v-model='requestString.tel' placeholder="请输入账号（手机号）" clearable class='input' />
                  </FormItem>
                   <FormItem prop="password">
                      <Input v-model='requestString.password' @keyup.enter.native="handleSubmit('requestString')" placeholder="输入密码" type="password" clearable class='input' />
                  </FormItem>                   
                   <FormItem>
                      <Button class='button' type="primary" :loading="loading" @click="handleSubmit('requestString')">登  录</Button>
                  </FormItem>
                </Form>
              </div>
            </TabPane>           
        </Tabs>
        <div class='titp'>
            <!--  <span  @click="forget_pas">  忘记密码</span>    !-->
        </div>
      </div>
        
      </div>
    </div>
  </div>
  
</template>


<script>
import { Login } from "./../apis/api_system.js";
import { setAdmin, setToken, getAdmin } from "./../utils/auth.js";
import { validatePhone } from "../utils/validate.js";
export default {
  name: "Login",
  data() {
    return {
      loading: false,
      ruleCustom: {
        tel: [
          { 
            required: true,
             message: "账号不能为空" 
            },{
            validator: (rule, value, callback) => {
              if (validatePhone(value)) {
                callback();
              } else {
                callback(new Error("请输入正确的手机号"));
              }
            }
            // trigger: "blur"
          }],
        password: [
          { required: true, message: "请输入密码" },
          {
            type: "string",
            min: 6,
            message: "密码不得少于6位"
            // trigger: "blur"
          }
        ]
      },
      requestString: {
        tel: "",
        password: ""
      }
    };
  },
  methods: {
    forget_pas() {
      this.$router.push("/forget");
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.Login();
        }
      });
    },

    Login() {
      this.loading = true;
      let requestString = { requestString: JSON.stringify(this.requestString) };
      Login(requestString)
        .then(({ returnString, code, disp }) => {         
          if (code == 200) {
            this.$Message.success(disp);            
            setAdmin(returnString);
            this.$router.push("/");
          } else {
            this.loading = false;
            this.$Message.warning(disp);
          }
        })
        .catch(err => {
           this.$Message.warning("请求错误");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.login{
  width: 100vw;
  height: 100%;
  overflow: hidden;
  .header{
    max-width: 1920px;
    margin: 0 auto;
    height: 100px;
    line-height: 100px;
    background: #fff;
    text-align: left;
    >img{
      height: 100px;
      vertical-align: top;
    }
  }
  .content{
    width: 100%;
    height: calc(100vh - 100px);
    background: url("./../../public/static/images/bg.png") center no-repeat;
    background-size: 100% 100%;
    >div{
      max-width:1920px;
      height: 100%;
      position: relative;
    }
    .panel{
      width: 424px;
      height: 360px;
      background: #fff;
      position: absolute;
      top: 170px;
      right: 170px;
      text-align: left;
      .tabbar{
        font-size: 24px;
        height: 58px;
        line-height: 58px;
        padding-left: 50px;
        margin-right: 10px;
        border-bottom: 1px solid #ebebeb;
        .tabbar_dec{
          color: #2d8cf0;
          font-size: 14px;
        }
      }
      .titp{
        font-size: 14px;
        text-align: right;
        margin-right: 44px;
        margin-top: -14px;
      }
    }
  }
}
</style>

<style lang="scss">
.login  .tabs{
    margin: 10px 50px 0 50px;
    .tabsot{
      margin-top:24px;
    }
    input{
      height:38px !important;
      font-size:14px;
      border-color:#a8a8a8;
      border-radius:0px;
      &::placeholder{
        font-size:14px;
        color:#808080;
      }
    }
    .button{
      width: 100%;
      height: 40px;
      font-size: 18px;
      line-height:24px;
      border-radius: 0px;
      outline: none;
      margin-top:20px;
    }
}

</style>
